<template>
  <div class="home">
    当前版本:{{ state.version }}
    <div class="box borderCorner">
      <span @click="autoUpdate()">助力产业园区</span>
    </div>
    <ol id="content">
      <li>生命周期过程展示</li>
    </ol>
  </div>
</template>

<script setup>
import { ipcRenderer } from "electron";
import { useRouter } from "vue-router";
const router = useRouter();
const autoUpdate = () => {
  console.log("更新", process.versions.node);
  ipcRenderer.send("update", "更新...");
  router.push("/b");
};
ipcRenderer.on("something1", (event, data) => {
  console.log(data); // 我是主进程返回的值
});
// 使用 remote 模块,可以在渲染进程中直接使用主进程模块
const { dialog } = require("electron").remote;
dialog.showMessageBox({
  type: "info",
  message: "在渲染进程中直接使用主进程的模块",
});

// 渲染进程之间的通信，修改新数据
require("electron").remote.getGlobal("sharedObject").someProperty =
  "home页修改后的=====new value";
</script>
<style scoped>
.home {
  width: 100%;
  height: 100%;
  background-image: url(../assets/bg-login-city.jpg);
  background-size: 100% 100%;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(16, 37, 57, 0.5);
  border: 1px solid #108ba1;
  padding: 10px 20px;
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #0adfff;
  line-height: 40px;
}
.borderCorner {
  background: linear-gradient(
        to bottom,
        #33cdfa 0px,
        #33cdfa 2px,
        transparent 0px,
        transparent 100%
      )
      left top no-repeat,
    linear-gradient(
        to right,
        #33cdfa 0px,
        #33cdfa 2px,
        transparent 0px,
        transparent 100%
      )
      left top no-repeat,
    linear-gradient(
        to bottom,
        #33cdfa 0px,
        #33cdfa 2px,
        transparent 0px,
        transparent 100%
      )
      right top no-repeat,
    linear-gradient(
        to left,
        #33cdfa 0px,
        #33cdfa 2px,
        transparent 0px,
        transparent 100%
      )
      right top no-repeat,
    linear-gradient(
        to top,
        #33cdfa 0px,
        #33cdfa 2px,
        transparent 0px,
        transparent 100%
      )
      left bottom no-repeat,
    linear-gradient(
        to right,
        #33cdfa 0px,
        #33cdfa 2px,
        transparent 0px,
        transparent 100%
      )
      left bottom no-repeat,
    linear-gradient(
        to top,
        #33cdfa 0px,
        #33cdfa 2px,
        transparent 0px,
        transparent 100%
      )
      right bottom no-repeat,
    linear-gradient(
        to left,
        #33cdfa 0px,
        #33cdfa 2px,
        transparent 0px,
        transparent 100%
      )
      right bottom no-repeat;
  background-size: 14px 14px;
}
</style>
